Question

我有一个包含字符串的数组，一些元素包含超链接的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()提供给另一个函数

Answer 1

您要将其添加为文本 - 您应该将其添加为 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>

Answer 2

document.getElementById("modalContent").textContent = callback();
                                       ^^^^^^^^^^^^^

textContent将向元素添加文本节点。因此，如果您检查呈现的<a>，它会显示<a>，因为它是在编码后添加的。

要避免这种情况，请使用innerHTML;

代码将是

document.getElementById("modalContent").innerHTML = callback();

Answer 3

最简单的解决方案是使用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)
}

显示超链接输出的HTML标记

3 个答案: