将内部元素文本动态更改为href链接？
[英]Dynamically change inner element text to a href link?
问题描述
I am creating a web extension and need to dynamically change inner text to a link. 
我正在创建一个Web扩展程序，需要动态地将内部文本更改为链接。 Since it's a web extension, I can't make too many assumptions about where this text will be located. 由于它是一个Web扩展程序，因此我无法对此文本的位置做出太多假设。 Furthermore, the changes need to be dynamically loaded (this is the main problem I have). 此外，更改需要动态加载（这是我遇到的主要问题）。
For example, I need to find all instances of the text "foo" on a page and replace it with <a href="www.mylink.com">foo</a> , so that the text on the page now is displayed as a link. 例如，我需要在页面上找到文本“ foo”的所有实例，并用<a href="www.mylink.com">foo</a>替换它，以便现在显示页面上的文本作为链接。 I have the following functions, which correctly replaces occurrences, but the <a> tag that it inserts simply gets displayed in the browser as the raw html, instead of being displayed as a link. 我具有以下功能，可以正确替换出现的位置，但是它插入的<a>标签只是在浏览器中显示为原始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.text($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>
2 个解决方案
解决方案1
3 已采纳 2018-03-18 15:52:26
TLDR: Change $this.text(...) to $this.html(...) . TLDR：将$this.html(...)更改$this.text(...) $this.html(...) 。
The longer answer is the main difference between the two methods: 较长的答案是两种方法之间的主要区别：
- The
htmlmethod will "set the HTML contents of each element in the set of matched elements".html方法将“设置匹配元素集中每个元素的HTML内容”。 - The
textmethod will also set the content of the elements but "escapes the string provided as necessary so that it will render correctly in HTML."text方法还将设置元素的内容，但是“根据需要转义提供的字符串，以便可以正确地以HTML呈现”。
That last point is critical because "to do so, it calls the DOM method .createTextNode(), does not interpret the string as HTML". 最后一点很关键，因为“为此，它调用DOM方法.createTextNode（），不会将字符串解释为HTML”。 This basically means that any HTML would be escaped so as to be a able to be displayed as text. 基本上，这意味着任何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));
}
});
}
解决方案2
1 2018-03-18 16:05:51
The function $.text() returns as text the already rendered/processed HTML by the engine and receives the text to be shown. 函数$.text()以文本形式返回引擎已渲染/处理的HTML，并接收要显示的文本。
In your approach, you're passing as text the new generated HTML, so the engine will handle it as text and none rendering process will be executed. 在您的方法中，您将新生成的HTML作为文本传递，因此引擎会将其作为文本进行处理，并且不会执行任何渲染过程。
To render that new generated HTML use the function $.html() instead. 要渲染新生成的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>
Aside note , for future approaches use the function $.on to bind events to the elements. 除了note ，对于将来的方法，请使用$.on函数将事件绑定到元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.