JS：用char替换text char，它可以包含h​​tml标签

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替换文本，但保留所有格式和标签。例如，将当前“123456”替换为“abcdef”。字符数始终相同。结果应该是：

<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

我会这样做：

 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 2

你有一个解决方案。

我希望它对你有用！

＆＃13;

＆＃13;

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);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这适用于任何字符串：

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>