超链接输出中显示的HTML标记
超链接输出中显示的HTML标记
提问于 2017-08-23 18:22:30
我有一个包含字符串的数组，一些元素包括超链接的href标记。数组如下：
var yesResources2 = ["",
"",
"",
"",
"Refer to <a href='https://www.ipc.on.ca/wp-
content/uploads/Resources/naid.pdf'>Best Practices for Secure
Destruction of Sensitive Information</a>",
"",
"",
'Refer to <a href="https://www.bdc.ca/en/articles-
tools/technology/invest-technology/pages/computer-security-how-protect-
your-technology.aspx">Business Development Bank of Canada’s “10
questions to boost your tech security”</a>',
'Refer to <a href="https://www.bdc.ca/en/articles-
tools/technology/invest-technology/pages/computer-security-how-protect-
your-technology.aspx">Business Development Bank of Canada’s “10
questions to boost your tech security”</a>',
"",
""]我在JS中编写了一个函数来显示数组的某些元素。该函数运行良好，但输出不是超链接，而是如下所示：
Refer to <a href="https://www.bdc.ca/en/articles-tools/technology/invest-
technology/pages/computer-security-how-protect-
your-technology.aspx">Business Development Bank of Canada’s “10
questions to boost your tech security</a>为什么会发生这种情况？它在我正在做的项目的早期阶段显示为超链接.
显示链接的功能如下：
函数来确定显示的元素
function current()
{
if(selection === 0 && yesResources2[questionsCounter] != "")
{
return yesResources2[questionsCounter];
}
else if(selection === 1 && noResources2[questionsCounter] != "")
{
return noResources2[questionsCounter];
}
else
{
return 'You are on the right track!';
}
};代码显示
document.getElementById("modalContent").textContent = callback();其中，callback()作为current()被赋予另一个函数
回答 3
Stack Overflow用户
发布于 2017-08-23 18:24:32
您要将其添加为文本--您应该将其添加为html，如下所示：
document.getElementById("modalContent").innerHTML = callback()简化演示如下：
var yesResources2 = ["",
"",
"",
"",
"Refer to <a href='https://www.ipc.on.ca/wp-content / uploads / Resources / naid.pdf '>Best Practices for Secure Destruction of Sensitive Information </a>",
"",
"",
'Refer to <a href="https://www.bdc.ca/en/articles-tools / technology / invest - technology / pages / computer - security - how - protect -your - technology.aspx ">Business Development Bank of Canada’s “10 questions to boost your tech security” </a>','Refer to <a href="https://www.bdc.ca/en/articles-tools / technology / invest - technology / pages / computer - security - how - protect -your - technology.aspx ">Business Development Bank of Canada’s “10 questions to boost your tech security” </a>',
"",
""
]
selection = 0;
questionsCounter = 7;
function current() {
if (selection === 0 && yesResources2[questionsCounter] != "") {
return yesResources2[questionsCounter];
} else if (selection === 1 && noResources2[questionsCounter] != "") {
return noResources2[questionsCounter];
} else {
return 'You are on the right track!';
}
};
document.getElementById("modalContent").innerHTML = current();<div id="modalContent"></div>
Stack Overflow用户
发布于 2017-08-23 18:27:48
document.getElementById("modalContent").textContent = callback();
^^^^^^^^^^^^^textContent将向元素添加一个文本节点。因此，如果您检查呈现的<a>，它将显示<a>，因为它是在编码后添加的。
要避免这种情况，请使用innerHTML；
代码将是
document.getElementById("modalContent").innerHTML = callback();Stack Overflow用户
发布于 2017-08-23 18:55:10
最简单的解决方案是使用您定义的yesResources2元素，但请使用
document.getElementById("modalContent").innerHTML = callback();但是，我认为上面的内容很容易在原始字符串中输入和错误格式的html。下面的方法将更健壮，也可能更安全。
在数组中，可以为每个项存储几个单独的信息。类似于：
var yesResources2 = [
{
outerText: 'Refer to ',
href: 'https://www.ipc.on.ca/wp-
content/uploads/Resources/naid.pdf',
innerText: 'Best Practices for Secure
Destruction of Sensitive Information'
},
{
/* etc */
}
]然后：
function current() {
if(selection === 0 && yesResources2[questionsCounter].innerText != undefined)
{
return yesResources2[questionsCounter];
}
/* etc */
}..。
var modalContent = document.getElementById('modalContent');
var resource = callback();
// If there is text to be displayed before the link, create a
// textNode to hold it, and append it to the modal's body
if (resource.outerText && resource.outerText != "") {
var outerTextNode = document.createTextNode(resource.outerText);
modalContent.appendChildNode(outerTextNode);
}
// If there is a link to be displayed, create an anchor element,
// set the href attribute appropriately, and append it to the modal.
if (resource.href && resource.href != "") {
var anchorNode = document.createElement('A');
anchorNode.setAttribute('href', resource.href);
// Add the text for the link
if (resource.innerText) {
anchorNode.appendChildNode(document.createTextNode(resource.innerText);
}
modalContent.appendChildNode(anchorNode)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45846903
复制相关文章
相似问题
腾讯云开发者
