javascript - 如何使用 JavaScript 制作 HTML 标记

Question

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

笔记对象的结构如下:

{
   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>");
}

这个函数的问题是:如果笔记有链接，我想将这些链接作为“a”标签中的超链接添加到 UI，例如:

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}})。我还建议将逻辑分成更多的函数，这样更容易推理。

举个例子:

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>