JS:用char替换文本char，其中可以包含HTML标签

Question

我有带有许多标签的文本，并且格式如下：

<u>
  1
  <span style="color: rgb(255, 0, 0);">
    <span style="font-size: 45px;">2</span>
    <span class="Raleway">34</span>
  </span>
  <i>
    <span style="color: rgb(255, 0, 0);" class="Raleway">5</span>
    6
  </i>
</u>

任务是使用js或jQuery替换文本，但要保留所有格式和标签。例如，用" ABCDEF"替换当前的" 123456"。字符的数量总是相同的。结果应该是：

<u>
  a
  <span style="color: rgb(255, 0, 0);">
    <span style="font-size: 45px;">b</span>
    <span class="Raleway">cd</span>
  </span>
  <i>
    <span style="color: rgb(255, 0, 0);" class="Raleway">e</span>
    f
  </i>
</u>

我没有好主意，如何解决这个问题，所以我很高兴获得任何帮助。

Answer 1

这应该与任何字符串一起使用：

function isTextNode (node) {
  return node.nodeType === Node.TEXT_NODE;
}
function walkTextNodes (node, fn) {
  var children = node.childNodes;
  for (var i = 0; i < children.length; i++) {
    var child = children.item(i);
    if (isTextNode(child)) {
      fn(child);
    } else {
      walkTextNodes(child, fn);
    }
  }
}
function replaceContents (string) {
  var index = 0;          // the current index in the string
  
  walkTextNodes(container, function (node) {
    var text = node.nodeValue.trim();
    var length = text.length;
    node.nodeValue = string.slice(index, index + length);
    index += length;
  });
}
var container = document.querySelector('#container');
var input = document.querySelector('input');
var button = document.querySelector('button');
button.addEventListener('click', function () {
  var string = input.value; // the new string
  replaceContents(string);
});

<div id="container">
  <u>
    1
    <span style="color: rgb(255, 0, 0);">
      <span style="font-size: 45px;">2</span>
      <span class="Raleway">34</span>
    </span>
    <i>
      <span style="color: rgb(255, 0, 0);" class="Raleway">5</span>
      6
    </i>
  </u>
  
</div>
<input type="text" placeholder="Enter the new string">
<button>Replace</button>

Answer 2

我会这样做：

 var fullHtml = $("u").html(); //This returns a string
 fullHtml = fullHtml.replace("1","a");
 fullHtml = fullHtml.replace("2","b");
 fullHtml = fullHtml.replace("3","c");
 fullHtml = fullHtml.replace("4","d");
 $("u").html(fullHtml);

您也可以通过使用for循环来改进：

 var alphabet = ["", "a","b","c","d","e"];
 var fullHtml = $("u").html(); //This returns a string
 for(var i=1; i<6; i++){
      fullHtml = fullHtml.replace(""+i,alphabet[i]);
 }
 $("u").html(fullHtml);

Answer 3

您有解决方案。

我希望它对您有用！

var originals = ['1','2','3','4','5','6'];
var replacers = ['a','b','c','d','e','f'];
var html_content = $("u").html();
for(const [index, item] of originals.entries()) {
  var regEx = new RegExp("(" + item + ")(?!([^<]+)?>)", "gi");
  
  html_content = html_content.replace(regEx, replacers[index]);
} 
$("u").html(html_content);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<u>
  1
  <span style="color: rgb(255, 0, 0);">
    <span style="font-size: 45px;">2</span>
    <span class="Raleway">34</span>
  </span>
  <i>
    <span style="color: rgb(255, 0, 0);" class="Raleway">5</span>
    6
  </i>
</u>