Question

因此，假设您的HTML看起来像这样：

<p>This text is <b>bold</b></p>

和这个Javascript：

var obs = document.getElementsByTagName("p");
var obsreplace = obs[0].innerHTML.replace(/b/gi, "g");
obs[0].innerHTML = obsreplace;

这会将HTML更改为：

<p>This text is <g>gold</g></p>

但如果我想将其更改为：

<p>This text is <b>gold</b></p>

并保持粗体标签不变？

Answer 1

那么，两个解决方案是用正则表达式替换保留匹配的组，还是使用getElementsByTagName？在对元素进行任何操作之前，您必须检查obs和粗体的长度，确保没有错误。

＆＃13;

var obs = document.getElementsByTagName("p");
var bold = obs[0].getElementsByTagName("b")[0];
bold.innerHTML = "gold";

var obs = document.getElementsByTagName("p");
var replaceHtml = obs[1].innerHTML.replace(/(<b>).*?(<\/b>)/, "$1gold$2");
obs[1].innerHTML = replaceHtml;

＆＃13;

<p>This text is <b>bold</b></p>
<p>This text is <b>bold</b></p>

＆＃13;

Answer 2

您想要使用childNodes，并针对其中的每一个运行替换。这将与元素分开捕获文本节点。通过递归循环遍历每个子元素，直到只剩下文本节点，您可以安全地对元素中的所有文本运行替换命令。

＆＃13;

function safeReplace(elem, replaceFn){
  let nodes = elem.childNodes, i = -1
  while(++i < nodes.length){
    let node = nodes[i]
    if(node.nodeType == 3){ //signifies a text node
      node.textContent = replaceFn(node.textContent)
    } else {
      safeReplace(node, replaceFn)
    }
  }
}
document.querySelector('button').addEventListener('click', function(){
  safeReplace(document.getElementById('testDiv'), function(str){
    return str.replace(/e/gi, '_E_')
  })
})

＆＃13;

<div id="testDiv">
This div has outer content, as well as <p>a paragraph containing a <span>spanned text</span> in the middle</p>More text.</div>

<button>Replace Text</button>

＆＃13;

当替换标签内的字符时，如何避免在标签内编辑标签

2 个答案: