主页 / 问题 / 867271
Accepted
Vitali Malinovski
Asked:2020-08-11 05:37:47 +0000 UTC2020-08-11 05:37:47 +0000 UTC

仅替换 HTML 代码中的文本

  • 772

例如，有一个 HTML 代码：

<div class="w1 pa" style="top:0;padding:5px 15px;text-align:center;">
<a id="connect" href="#" class="action yes et2">Получить список доменов</a>
<a id="delete_all" href="#" class="action no et2 f_r">Удалить все</a>
<a id="count_all" href="#" class="action save et2">Посчитать все письма</a>
<a id="filter" href="#" class="action save et2">Фильтровать</a>
</div>

首先，代码里面的文字可以是任意的：俄语、英语、字符、数字等。
其次，此 HTML 代码将位于 JS 变量中。

所以，我需要用我自己想要的替换这个 HTML 代码中的所有字母。例如，А将所有字母替换为<span>1</span>，依此类推...

重要的！HTML 代码可以不同且不是静态的。我们需要一个脚本来搜索代码中的字母，将我选择的字母替换为完全不同的字母。

javascript

3 个回答

  1. Best Answer

    因此，您也可以在解决问题的同时学习 JavaScript））仅限 JS。

    var Str = '<div class="w1 pa" style="top:0;padding:5px 15px;text-align:center;">\
<a id="connect" href="#" class="action yes et2">Получить список доменов</a>\
<a id="delete_all" href="#" class="action no et2 f_r">Удалить все</a>\
<a id="count_all" href="#" class="action save et2">Посчитать все письма</a>\
<a id="filter" href="#" class="action save et2">Фильтровать</a>\
</div>';

function fAccurateReplace(sSourceStr, rExp, sSubstr) {
  
  var oFakeElement = document.createElement('PRE');
  oFakeElement.insertAdjacentHTML('afterbegin', sSourceStr);
  
  var treeWalker = document.createTreeWalker(oFakeElement, NodeFilter.SHOW_TEXT, null, false);
  while (treeWalker.nextNode()) {
    treeWalker.currentNode.parentElement.innerText = treeWalker.currentNode.parentElement.textContent.replace(rExp, sSubstr);
  }
  return oFakeElement.innerHTML
}

console.log(fAccurateReplace(Str, /(о.*?т)/gi, '(ЗАМЕНА)'));

    • 6

  2. 我想听听每个字母到底应该是什么以及为什么。
    此外，输入数据没有任何内容。

    例如，在我的解决方案中，让输入是某些字符串的数组 

    const str = `<div class="w1 pa" style="top:0;padding:5px 15px;text-align:center;">
<a id="connect" href="#" class="action yes et2">Получить список доменов</a>
<a id="delete_all" href="#" class="action no et2 f_r">Удалить все</a>
<a id="count_all" href="#" class="action save et2">Посчитать все письма</a>
<a id="filter" href="#" class="action save et2">Фильтровать</a>
</div>`;
var data = [
	'Список доменов получен',
	'Всё давно удалено',
	'Письма подсчитаны',
	'Отфильтрованы'
];
function replaceMath(data) {
	let $newStr = $(str).clone(),
		i = 0;
	$("> *", $newStr).each(function(){
		$(this).text(data[i]);
		++i;
	});
	return $newStr.prop('outerHTML');
}

var newStr = replaceMath(data);
console.log(newStr);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    但是，这很可能不是 topikstarter 所需要的。详细地绘制所有内容，而不是像最后三句话那样堆砌。

    • 3

  3. 使用 jquery -$('#el_id').text('Some English ');

    • 0

相关问题