在可疑的div中加入特定文本 [英] Bold a specific text inside a contenteditable div

问题描述

我在我满意的div中有这个。每当我键入#something，然后输入空格，我想在该div中立即加粗该单词。

I have this in my contenteditable div. Whenever I type #something, then type space, I would like to bold that word instantly in that div.

例如。

这是我的留言。 ＃大声笑。我想加粗标签。

This is my message. #lol. I would like to bold the hashtag.

以下是我的代码

<div id="message" name="message" contenteditable="true"></div>

$('#message').keyup(function(e){

  var len = $(this).val().length;
  if ($(this).val().substring(length - 1, 1) == '#') {

  }

  //detect space
  if(e.keyCode == 32){

  }
});

我正在使用jquery。我该如何做？

I am using jquery. How do i go about doing so?

推荐答案

使用 contenteditable =true可能很棘手，但这是一个可能的解决方案：

Using contenteditable = "true" may be tricky, but this is a possible solution:

当一个单词前面带有＃<时，文字为粗体 / strong>

The text is bold when a word is preceded by #

• 示例：hello #world ，这是 #sample

• Example: hello #world, this is a #sample

<div id="divEditable" contenteditable="true"></div>

JavaScript： jsbin.com/zisote

我们将拆分代码，但实际上它包含在< a href =http://en.wikipedia.org/wiki/Immediately-invoked_function_expression =nofollow> IIFE

/*** Cached private variables ***/
var _break = /<br\s?\/?>$/g,
    _rxword = /(#[\w]+)$/gm,
    _rxboldDown = /<\/b>$/gm,
    _rxboldUp = /<\/b>(?!<br\s?\/?>)([\w]+)(?:<br\s?\/?>)?$/,
    _rxline = /(<br\s?\/?>)+(?!<b>)(<\/b>$)+/g;

/*** Handles the event when a key is pressed ***/
$(document).on("keydown.editable", '.divEditable', function (e) {
  //fixes firefox NodeContent which ends with <br>
  var html = this.innerHTML.replace(_break, ""),
      key = (e.which || e.keyCode),
      dom = $(this);

  //space key was pressed
  if (key == 32 || key == 13) {
    //finds the # followed by a word
    if (_rxword.test(dom.text()))
      dom.data("_newText", html.replace(_rxword, "<b>$1</b>&nbsp;"));
    //finds the end of bold text
    if (_rxboldDown.test(html))
      dom.data("_newText", html + "&nbsp;");
  }
  //prevents the bold NodeContent to be cached
  dom.attr("contenteditable", false).attr("contenteditable", true);
});

/*** Handles the event when the key is released ***/
$(document).on("keyup.editable", '.divEditable', function (e) {
  var dom = $(this),
      newText = dom.data("_newText"),
      innerHtml = this.innerHTML,
      html;

  //resets the NodeContent
  if (!dom.text().length || innerHtml == '<br>') {
    dom.empty();
    return false;
  }

  //fixes firefox issue when text must follow with bold
  if (!newText && _rxboldUp.test(innerHtml))
    newText = innerHtml.replace(_rxboldUp, "$1</b>");

  //fixes firefox issue when space key is rendered as <br>
  if (!newText && _rxline.test(innerHtml)) html = innerHtml;
  else if (newText && _rxline.test(newText)) html = newText;

  if (html) newText = html.replace(_rxline, "$2$1");

  if (newText && newText.length) {
    dom.html(newText).removeData("_newText");
    placeCaretAtEnd(this);
  }
});

/*** Sets the caret position at end of NodeContent ***/
function placeCaretAtEnd (dom) {
  var range, sel;
  dom.focus();
  if (typeof window.getSelection != "undefined"
  && typeof document.createRange != "undefined") {
      range = document.createRange();
      range.selectNodeContents(dom);
      range.collapse(false);
      sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
      //this handles the text selection in IE
      range = document.body.createTextRange();
      range.moveToElementText(dom);
      range.collapse(false);
      range.select();
  }
}

您可以在此处使用实时代码： jsbin.com/zisote

You can play with live code here: jsbin.com/zisote

这篇关于在可疑的div中加入特定文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！