首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >超链接输出中显示的HTML标记

超链接输出中显示的HTML标记
EN

Stack Overflow用户
提问于 2017-08-23 18:22:30
回答 3查看 144关注 0票数 1

我有一个包含字符串的数组,一些元素包括超链接的href标记。数组如下:

代码语言:javascript
运行
复制
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中编写了一个函数来显示数组的某些元素。该函数运行良好,但输出不是超链接,而是如下所示:

代码语言:javascript
运行
复制
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>

为什么会发生这种情况?它在我正在做的项目的早期阶段显示为超链接.

显示链接的功能如下:

函数来确定显示的元素

代码语言:javascript
运行
复制
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!';
      }
  };

代码显示

代码语言:javascript
运行
复制
document.getElementById("modalContent").textContent = callback();

其中,callback()作为current()被赋予另一个函数

EN

Stack Overflow用户

发布于 2017-08-23 18:55:10

最简单的解决方案是使用您定义的yesResources2元素,但请使用

代码语言:javascript
运行
复制
document.getElementById("modalContent").innerHTML = callback();

但是,我认为上面的内容很容易在原始字符串中输入和错误格式的html。下面的方法将更健壮,也可能更安全。

在数组中,可以为每个项存储几个单独的信息。类似于:

代码语言:javascript
运行
复制
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 */
    }
]

然后:

代码语言:javascript
运行
复制
function current() {
    if(selection === 0 && yesResources2[questionsCounter].innerText != undefined)
    {
        return yesResources2[questionsCounter];
    } 
    /* etc */
}

..。

代码语言:javascript
运行
复制
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)
}
票数 0
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45846903

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档