更新

Question

我正在编写一个javascript程序，它可以获得以下任何形式的输入。

"Here is the result \"<a href=\"www.google.com\">google</a>\", and \"<a href=\"www.yahoo.com\">yahoo</a>\""

或

"Here is a plain result"

并将其存储在变量中，例如X.我想在遇到锚标记时创建一个锚标记。我知道a href默认情况下会创建一个锚标记，但在我的情况下，结果会呈现为文本，这是我迄今为止尝试过的代码。

var newLink = document.createElement('a');
newLink.href = 'http://google.com';
newLink.innerHTML = 'My anchor';

if (message) {
    var x = message;
    console.log(x.includes("href"));
    if (!x.includes("href")) {
        responsePara.appendChild(document.createTextNode(message));
        responsePara.appendChild(document.createElement('br'));
    } else {
        //responsePara.appendChild(document.createTextNode(message));
        responsePara.appendChild(newLink);
        responsePara.appendChild(document.createElement('br'));
    }
}

我期待的输出是 case 1

<p> Here is the result "<a href="www.google.com">google</a>", and "<a href="www.yahoo.com">yahoo</a>"</p>

案例2

<p>Here is a plain result</p>

请告诉我如何才能这样做。

注意我只使用js，没有 jquery

Answer 1

我看不出你的问题，应该很容易实现这个，对吧？

您需要解析的只是HTML的输入。在另一个元素中（在您的情况下为p元素）

更新

我已更新此问题，因此您可以修改（或创建，如果没有ref）现有元素，但未解析a元素或纯文本。

function createOrUpdateCompositeLink(input, ref) {
  if (ref) {
    var isLinkText = input.match(/href/g);
    var elementChild;

    if (isLinkText) {
      elementChild = document.createElement('span');
      elementChild.innerHTML = input;
    } else {
      elementChild = document.createTextNode(input);
    }
    
    ref.appendChild(elementChild);

    return ref;
  } else {
    var element = document.createElement('p');

    element.innerHTML = input;  
    return element;
  }
}


/* USAGE */
var message;
var element;

message  = "Here is the result ";
message1 = "<a href=\"www.google.com\">google</a>\"";
message2 = " something plain text ";
message3 = ", and \"<a href=\"www.yahoo.com\">yahoo</a>\"";


var reference = document.querySelector('.ref');
var el;

createOrUpdateCompositeLink(message, reference);
createOrUpdateCompositeLink(message1, reference);
createOrUpdateCompositeLink(message2, reference);
createOrUpdateCompositeLink(message3, reference);

<div class="ref"></div>

Answer 2

我建议你考虑使用jQuery，你要做的是：

jQuery(".response").append(message);

我假设您的responsePara变量是从某个地方的现有<div>定义的。在我的示例中，<div>将有一个名为response的类。

<div class="response"></div>

收到消息后，会将其添加到响应div，但会添加一行jQuery()命令。

在para中动态创建锚点

2 个答案:

更新