Question

我使用以下功能在HTML中交换电话号码。我想让它完全独立于使用类名来选择元素。基本上它应该工作而不触及HTML代码。

document.body.innerHTML = document.body.innerHTML.replace( /54321/g, '12345' );

但使用它会使页面上的许多其他脚本无法正常工作（下拉菜单，按钮等）

这个替换功能有什么问题？为什么它会触及其他脚本的功能？

什么是更好的解决方案？

我需要改变这样的事情

<a href="tel:+54321"><span>+54321</span></a>

进入这个

<a href="tel:+12345"><span>+12345</span></a>

请注意，我必须更改文字和href =＆＃34;＆＃34;元件。

Answer 1

当您覆盖HTML内容时，将重建该部分页面的DOM（在本例中为整个<body>）。绑定到页面上元素的任何事件处理程序都将丢失，因为它们将与在此过程中删除的DOM元素相关联。

Answer 2

要替换文本中的字符串和href属性仅（避免使用其他属性，标记等），您需要单独攻击这两个问题。找到所有href属性，找到所有文本节点，并在两者中替换。类似的东西：

＆＃13;

var from = "54321", to = "12345";

var textNodes = [];

function findText(pnode) {
  for (var i = 0; i < pnode.childNodes.length; ++i) {
    var node = pnode.childNodes[i];
    
    if (node.nodeType == 3) { // text
      textNodes.push(node);
    } 
    else {
      findText(node);
    }
  }
}

var refs = document.querySelectorAll('[href*="' + from + '"]');

findText(document.body);

for (var i = 0; i < refs.length; ++i) {
  refs[i].href = refs[i].href.replace(from, to);
}

for (i = 0; i < textNodes.length; ++i) {
  textNodes[i].textContent = textNodes[i].textContent.replace(from, to);
}

＆＃13;

/* make sure we're not replacing where we shouldn't */

#p54321 {
  color: red;
}

＆＃13;

<a class="number_link" href="tel:+54321"><span>+54321</span></a>

<a class="otherclass" href="tel:+54321 x5"><span>+54321 x5</span></a>

<p id="p54321">This should remain red if its <code>id</code> is unchanged.</p>

＆＃13;

如果您 仅更改class=number_link href以及其中的，我们可以保存一些代码：

＆＃13;
＆＃13;
var from = "54321", to = "12345"; $('.number_link').attr('href', function() { return this.href.replace(from, to); }); $('.number_link span').html(function() { return this.innerHTML.replace(from, to); })
＆＃13;
#div54321 { color: red; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> number_link: <a class="number_link" href="tel:+54321">+54321</a> not number_link: <a class="otherclass" href="tel:+54321 x5">+54321 x5</a> Don't change this id - this should still be red!
＆＃13;
＆＃13;
＆＃13;

Answer 3

我希望我理解你的问题，但我不知道为什么你会以相反的顺序改变它？

fiddle

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ChangeTel</title>
    <style>

    </style>
  </head>
    <body>
      <p>Lorem ipsum dolor sit amet.
      <a class="number_link" href="tel:+54321"><span>+54321</span></a>

      <p>Lorem ipsum dolor sit amet.
      <a class="number_link" href="tel:+98765"><span>+98765</span></a>
    <script>
      [].forEach.call(document.getElementsByClassName('number_link'),
      function(el){
        var hrefTel=el.href.split('+')[1];
        var elHref=el.href.split('+')[0];
        el.setAttribute('href',elHref+'+'+hrefTel.match(/./g).reverse().join(''));
       el.getElementsByTagName('span')[0].innerHTML='+'+hrefTel.match(/./g).reverse().join('');
      });
  </body>  
  </html>

Answer 4

尝试这样的事情，

<div id="replaceContent"> <a class="number_link" href="tel:+54321"><span>+54321</span></a></div>

稍后您可以单独替换此特定div的html内容，而不是替换整个页面。

$("#replaceContent").html(<a class="number_link" href="tel:+12345"><span>+12345</span></a>)

如果您使用锚标记附加了任何事件监听器，那么这些监听器现在不起作用。因为replaceContent div中的HTML内容现在是新呈现的。

要克服这一点，你可以使用，

$("a").on("click",function() { });

jQuery on（）用于将事件绑定到动态添加的DOM元素。

干杯!!

替换innerHTML会阻止其他脚本工作

4 个答案: