Question

所以我有一个HTML页面，我想用链接替换各种单词的出现。例如：

<p>This is a test paragraph.</p>

我想成为：

 <p>This is a <a href="test.html">test</a> paragraph.</p>

现在，我知道我可以通过使用JavaScript来实现这一目标：

document.getElementById("test").innerHTML = "<a href='test.html'>test</a>"

将放在我想要改成的任何单词周围。

然而，我要为此做大约100个单词，而且我不想让每个单词都有一个唯一的ID。是否有更快/更好的方法来做这个只需要一个id然后js匹配单词并用相关链接替换它？

感谢您的帮助。 请仅JavaScript答案，不要jQuery。

Answer 1

尝试创建一个具有一个参数的函数：要替换的文本;将函数的this设置为target元素。可以创建要替换的数组或单词，使用替换函数作为回调迭代单词数组

// save original `.innerHTML` of element
var originalHTML = []; 
var elems = 0;

function re(text) {
  element = this;
  // if `text` is not empty string, not a number to reference 
  // index of `originalHTML`
  if (typeof text !== "number" && (typeof text === "string" && text.length)) {
    // save original `html`
    originalHTML.push(element.innerHTML); 
    // note `.textContent` is replaced here, not `.innerHTML`
    // to avoid replacing words within element tag or attributes
    element.innerHTML = element.textContent
      .replace(new RegExp("(" + text + ")", "g")
        // replace matched word with `a` element
        // add `replaced-` + `elems` `class` to `a` element
        , "<a href=" + text + ".html class=replaced-"+ elems +">$1</a>");
    ++elems;
  } else {
    // reset `element` `html` to `originalHTML`
    element.innerHTML = originalHTML[text];
  }      
}

re.call(document.querySelector("p"), "test");

setTimeout(function() {
  // reset to original html
  re.call(document.querySelector("p"), 0)
}, 5000)

[class|='replaced'] {
  color: green;
}

<p>This is a test paragraph.</p>

Answer 2

首先，我建议为id提供This is a test paragraph.属性，或者您可以parentNode.getElementsByTagName('p')[n] parentNode document n和0访问该属性}是一个数字，从第一个元素的This is a test paragraph.开始。看看这个：

HTML 修改

var doc, bod, E, T, makeLink;
var pre = onload; // change pre to anther var name if nesting onloads
onload = function(){
if(pre)pre();

doc = document; bod = doc.body;
E = function(id){
  return doc.getElementById(id);
}
T = function(tag){
  return doc.getElementsByTagName(tag);
}
makeLink = function(node, word, href){
  if(node.innerHTML){
    node.innerHTML = node.innerHTML.replace(word, "<a href='"+href+"'>"+word+'</a>');
  }
  return false;
}
makeLink(E('testId'), 'test', 'test.html');
/* without an `id` code could be
  makeLink(T('p')[0], 'test', 'test.html');
*/

}

现在有些 JavaScript ：

{{1}}

Answer 3

首先给你的元素一个类。

<p>This is a <a href="#" class="myClass">test</a> paragraph.</p>

使用for循环侦听ClassName

(function (){
var UI;
UI = {
    myLoad: function () {
        var myClass = document.getElementsByClassName("myClass");
        for (var i = 0; i < myClass.length; i++) {
            myClass[i].addEventListener('click', UI.myFunc, false);
        }
    },
    myFunc: function () {
        var myText = "My Test works";
        p1.innerHTML = myText;
    }
}
window.onload = function () {
    UI.myLoad();
}
}())

Answer 4

执行此操作的一种相当有效的方法是将段落分解为单词，并在将字符串重新连接在一起之前将结果映射到键索引。

在下面的代码中，我们拆分了单词 boundries ，如/\b/正则表达式所示。

'Lorem ipsum sit amet, elit.'.split(/\b/)

变为

["Lorem", " ", "ipsum", " ", "sit", " ", "amet", ", ", "elit", "."]

这假设我们在我们的段落中只使用了文本 - 事先没有标记，或者它会丢失。

这是基本的例子，可以改进。

＆＃13;

function mapReplace (map, element) {
  var text = element.innerText,
      parts = text.split(/\b/);
      
  element.innerHTML = parts.map(function (part) {
  	return map[part] || part;
  }).join('');
}

mapReplace({
  test: '<a href="test.html">test</a>'
}, document.getElementById('my-text'))

＆＃13;

a {
  color: red;
}

＆＃13;

<p id="my-text">Lorem ipsum test dolor sit amet, consectetur adipisicing elit. Consequuntur optio autem veniam in quisquam natus ducimus, quis, test doloremque officia deleniti odit blanditiis modi distinctio accusamus rem consequatur? Nulla, obcaecati, ipsa.</p>

＆＃13;

这里涉及的内容更多，忽略了匹配的情况，并插入了套装版本。

＆＃13;

function wrapWords (words, element) {
  var text = element.innerText,
      parts = text.split(/\b/);

  element.innerHTML = parts.map(function (part) {
    var lower = part.toLowerCase(),
        output = part;

    if (words.hasOwnProperty(lower))
      output = words[lower].replace('{_}', part);

    return output;
  }).join('');
}

wrapWords({
  test: '<a href="test.html">{_}</a>',
  lorem: '<span>{_}</span>'
}, document.getElementById('my-text'))

＆＃13;

body {
  background-color: #aaa;
}

a {
  color: red;
}

span {
  color: blue;
}

＆＃13;

<p id="my-text">Lorem ipsum test dolor sit amet, consectetur adipisicing elit. Consequuntur optio autem veniam in quisquam natus ducimus, quis, test doloremque officia deleniti odit blanditiis modi distinctio accusamus rem consequatur? Nulla, lorem <i>obcaecati</i>, ipsa.</p>

＆＃13;

无论您做什么，都不要在原始HTML上使用.replace / RegExp。如果你看到innerHTML.replace - 跑得很远。

Answer 5

在给定的html元素中替换某些html的禁区方法是使用innerHTML。

var el = document.getElementById('elementId');
el.innerHTML = "<h1>JS generated content</h1>";

显然，您需要某种映射到您想要操作的元素。在操作之前，您可以循环执行并检查文档内容。

好的，这是一个通过所有p标签并将“google”替换为google域名的示例。

这只是一个例子

document.querySelectorAll('p').forEach(function(el) {
  if (el.innerHTML.indexOf("google") > 0) {
    el.innerHTML.replace("google", "<a href='http://www.google.com'>Link to Google</a>)
  }
})

而不是indexOf你可以使用regEx例如

if (/google/.test(el.innerHTML)) 
...

如何有效地使用JavaScript替换HTML？

5 个答案: