如何描边字符串，以'~'开头？

Question

伙计们！我需要做以下事情。有一个字段可以输入。当他介绍以 ~ 开头的内容时，以下所有内容都必须用框架进行强化（直接在字段中输入或在下面的列表中）。如何实施？（没有jQuery，好吗？）

Answer 1

你可以做的是在你想要包围的字符串部分周围添加一个标签

input = document.getElementById("input")
result = document.getElementById("result")

input.onkeyup = () => {
  // you need to know if the ~ is a start or end of framing
  isFramed = false
  // the resulting HTML is kept in this variable
  // adding directly to result.innerHTML cause browser to autoclose the <span> immediatly
  resultContent = ""
  
  for (let cara of input.value) {
    // if the current char is a ~
    if (cara === '~') {
      // and there is a frame
      if (isFramed) {
        // close the frame
        resultContent += "</span>"
      } else {
        // else start a new frame
        resultContent += "<span style=\"border: 1px solid black\">"
      }
      // inverse isFramed value
      isFramed = !isFramed
    } else {
      // for every other char just copy it as is
      resultContent += cara;
    }
  }

  // finaly set result's innerHTML to the builded string
  result.innerHTML = resultContent
}

<input id="input"/>
<div id="result"></div>

注意：您可以通过将 <span> 的样式移动到 css 文件

来减小生成的 HTML 大小

如何描边字符串，以'~'开头？

How to stroke string, beginning with' ~'?

javascript

html

css

stroke