Question

我正在创建一个Web扩展，需要动态地将内部文本更改为链接。由于它是网络扩展程序，因此我无法对此文本的位置做出太多假设。此外，需要动态加载更改（这是我遇到的主要问题）。

例如，我需要查找文本的所有实例＆＃34; foo＆＃34;在页面上并将其替换为<a href="www.mylink.com">foo</a>，以便页面上的文本现在显示为链接。我有以下函数，它们正确地替换了出现次数，但它插入的<a>标记只是作为原始html显示在浏览器中，而不是显示为链接。

＆＃13;

function replace_with_link()
{
  var link = "https://google.com";
  var name = "Lorem Ipsum";
	var link_wrapper = "<a href=\"" + link + "\">" + name + "</a>";
	replaceText('*', name, link_wrapper, 'g');
}

function replaceText(selector, text, newText, flags) 
{
	var matcher = new RegExp(text, flags);
	$(selector).each(function () 
	{
		var $this = $(this);
		var replaced_text = "";
		if (!$this.children().length)
		{
		   $this.text($this.text().replace(matcher, newText));
		}
	});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button onclick="replace_with_link();">Click me</button>

</body>
</html>

＆＃13;

Answer 1

TLDR：将$this.text(...)更改为$this.html(...)。

答案越长，两种方法的主要区别在于：

html方法将＆＃34;设置匹配元素集合中每个元素的HTML内容＆＃34;。
text方法还会设置元素的内容，但是＆＃34;会根据需要转义提供的字符串，以便在HTML中正确呈现。＆＃34;

最后一点很关键，因为＆＃34;这样做，它调用DOM方法.createTextNode（），不会将字符串解释为HTML＆＃34;。这基本上意味着任何HTML都将被转义，以便能够显示为文本。

function replace_with_link() {
  var link = "https://google.com";
  var name = "Lorem Ipsum";
  var link_wrapper = "<a href=\"" + link + "\">" + name + "</a>";
  replaceText('*', name, link_wrapper, 'g');
}

function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function() {
    var $this = $(this);
    var replaced_text = "";
    if (!$this.children().length) {
      $this.html($this.text().replace(matcher, newText));
    }
  });
}

Answer 2

函数 $.text() 返回引擎已呈现/处理的HTML文本，并接收要显示的文本。

在您的方法中，您将新生成的HTML作为文本传递，因此引擎将以文本形式处理它，并且不会执行任何渲染过程。

要渲染新生成的HTML，请使用 $.html() 功能。

function replace_with_link() {
  var link = "https://google.com";
  var name = "Lorem Ipsum";
  var link_wrapper = "<a href=\"" + link + "\">" + name + "</a>";
  replaceText('*', name, link_wrapper, 'g');
}

function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function() {
    var $this = $(this);
    var replaced_text = "";
    if (!$this.children().length) {
      $this.html($this.text().replace(matcher, newText));
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <button onclick="replace_with_link();">Click me</button>

</body>

</html>

除了注意之外，对于未来的方法，使用函数 $.on 将事件绑定到元素。

动态地将内部元素文本更改为href链接？

2 个答案: