Question

我有一个函数，该函数将注释对象添加到HTML UI。

note对象的结构如下：

{
   id,
   text,
   date,
   links : [
      { link,
        linkText
      }
   ]
}

我用来将注释对象添加到无序列表（）的函数

function addNoteToListUI(note) {
  $("#notesList").prepend("<li id='"+note.id+"'>" + note.text + "<div class='buttons'><button class='remove'>" + removeSVG + "</button></div></li>");
}

此功能的问题是：如果注释包含链接，我想将这些链接作为超链接添加到UI中，例如在'a'标签中：

let note = {
   id : 1,
   text : 'this is a simple note with a link and another link',
   date : '2018/01/01',
   links : [ {link : 'https://simple.com', text : 'link'},
             {link : 'https://simple2.com', text : 'another link'} ]
}

预期结果：

"<li id='"+note.id+"'> this is a simple note with a <a href ='https://simple.com'>link</a> and <a href ='https://simple2.com'>another link</a><div class='buttons'><button class='remove'>" + removeSVG + "</button></div></li>"

这是尝试过的方法，但是没有用：

function addNoteToListUI(note) {
  let text = "<li id='"+ note.id +"'>";
  if(note.links !== undefined){
    note.links.forEach(link => {
      note.text.replace(RegExp(link.linkText, 'ig'), (match) => {
        text += "<a href='"+link.link+"'>"+match+"</a>"
        return match;
      });
    });
  }
  $("#notesList").prepend("note.text + "<div class='buttons'><button class='remove'>" + removeSVG + "</button></div></li>");
}

这个问题很明显，它只添加了链接，剩下的是其他文本，

Answer 1

链接列表不明确，因为前link个文本与link和another link都匹配。因此，此答案取决于链接列表的顺序，这些链接的顺序是找到它们的顺序，并且仅匹配一次。否则，第一个link将在两个地方匹配，并且很难知道是哪个。

您可以将reduce()与links数组一起使用，并将文本作为第二个参数传递。这将创建带有锚点的文本：

let t = note.links.reduce((a,c) => a.replace(RegExp(c.text), '<a href="' + c.link + '">' + c.text + '</a>'), note.text)

现在，只需将其添加到列表元素中，最后得到一个整齐的两行函数：

let note = {id : 1,text : 'this is a simple note with a link and another link',date : '2018/01/01',links : [ {link : 'https://simple.com', text : 'link'},{link : 'https://simple2.com', text : 'another link'} ] }

function makeNote(note){
    let t = note.links.reduce((a,c) => a.replace(RegExp(c.text), '<a href="' + c.link + '">' + c.text + '</a>'), note.text)
    return "<li id='"+ note.id +"'>" + t + "</li>";
}

$("#notesList").prepend(makeNote(note))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="notesList"></ul>

Answer 2

问题是您要遍历链接而没有实际更新任何标记。而且，通过这种设置，将很难替换链接而不会产生歧义。例如，如果一个链接的一部分是另一链接的实际文本怎么办？

"link"将替换示例中“链接”和“另一个链接”的文本，这似乎是不希望的

我建议使用某种符号来表示“链接”（例如{{link}}）。我还建议将逻辑分为更多的功能，以便更轻松地进行推理。

这里是一个示例：

let note = {
  id: 1,
  text: 'this is a simple note with a {{link}} and {{another link}}',
  date: '2018/01/01',
  // note, "links" has been refactored into an object for ease of lookup
  links: {
    link: {
      link: 'https://simple.com',
      text: 'link'
    },
    'another link': {
      link: 'https://simple2.com',
      text: 'another link'
    }
  }
}

const linkToHTML = link => `
  <a href="${link.link}">${link.text}</a>
`

const resolvePlaceholders = (text, links) => 
  text.replace(/{{([^}]*)}}/ig, (match, $1) =>
    links[$1] ? linkToHTML(links[$1]) : match)

const noteToHTML = note => `
  <li class="note" id="${note.id}">
    ${resolvePlaceholders(note.text, note.links)}
    <div class="note-buttons">
      <button class="remove">X</button>
    </div>
  </li>
`

const prependNote = note => $('#notesList').prepend(noteToHTML(note))

prependNote(note)

.note {
  border: 1px solid grey;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="notesList"></ul>

如何使用JavaScript制作HTML标记

2 个答案: