Question

我希望能够让用户在文本区域输入内容，如果他键入一个哈希标记，后跟一个或多个字符，因为他键入的文字会突出显示，直到他到达空格。

我想要实现类似Facebook的新哈希标记功能，我已经完成了编码的逻辑但仍然无法在视觉上实现它。

我尝试的方法是使用Jquery，如下所示：

<textarea id="txtArea">Here is my #Hash</textarea>

$("#txtArea").onkeyup(function(){

var result = $("#txtArea").match(/ #[\w]+/g);

//result = '#Hash'
});

但我无法完成＆amp;我不知道从哪里开始，所以我可以使用任何解决方案，建议，插件，我将非常感激。

Answer 1

我不相信有任何方法可以在基本textarea内突出显示单词（除了单个突出显示），因为它不接受标记，您可以将textarea转换为小的Rich Text编辑器，但这看起来有点过于复杂。我可能会在SO上找到与编辑器类似的方法，并在下方有一个预览窗口，以便您可以看到正在标记的内容。您可以使用这样的东西，当然您可能想要改变它的工作方式以满足您的确切需求。它至少应该给你一些想法。

CSS

#preview {
    height: 2em;
    width: 12em;
    border-style: solid;
    border-width: 1px;
}
.hashSymbol {
    color: #f90;
}

HTML

<textarea id="userInput"></textarea>
<div id="preview"></div>

的Javascript

/*jslint maxerr: 50, indent: 4, browser: true */

(function () {
    "use strict";

    function walkTheDOM(node, func) {
        func(node);
        node = node.firstChild;
        while (node) {
            walkTheDOM(node, func);
            node = node.nextSibling;
        }
    }

    function getTextNodes(element) {
        var nodes = [];

        walkTheDOM(element, function (node) {
            if (node.nodeType === 3) {
                nodes.push(node);
            }
        });

        return nodes;
    }

    function escapeRegex(string) {
        return string.replace(/[\[\](){}?*+\^$\\.|]/g, "\\$&");
    }

    function highlight(element, string, classname) {
        var nodes = getTextNodes(element),
            length = nodes.length,
            stringLength = string.length,
            rx = new RegExp("\\B" + escapeRegex(string)),
            i = 0,
            index,
            text,
            newContent,
            span,
            node;

        while (i < length) {
            node = nodes[i];
            newContent = document.createDocumentFragment();
            text = node.nodeValue;
            index = text.search(rx);
            while (index !== -1) {
                newContent.appendChild(document.createTextNode(text.slice(0, index)));
                text = text.slice(index + stringLength);
                span = document.createElement("span");
                span.className = classname;
                span.appendChild(document.createTextNode(string));
                newContent.appendChild(span);
                index = text.search(rx);
            }

            newContent.appendChild(document.createTextNode(text));
            node.parentNode.replaceChild(newContent, node);
            i += 1;
        }
    }

    function addEvent(elem, event, fn) {
        if (typeof elem === "string") {
            elem = document.getElementById(elem);
        }

        function listenHandler(e) {
            var ret = fn.apply(null, arguments);

            if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
            }

            return ret;
        }

        function attachHandler() {
            window.event.target = window.event.srcElement;

            var ret = fn.call(elem, window.event);

            if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }

            return ret;
        }

        if (elem.addEventListener) {
            elem.addEventListener(event, listenHandler, false);
        } else {
            elem.attachEvent("on" + event, attachHandler);
        }
    }

    function emptyNode(node) {
        while (node.firstChild) {
            node.removeChild(node.firstChild);
        }
    }

    function toPreviewHighlight(e, to) {
        if (typeof to === "string") {
            to = document.getElementById(to);
        }

        var value = e.target.value,
            tags = value.match(/\B#\w+/g) || [],
            index = tags.length - 1,
            lookup = {},
            fragment,
            length,
            tag;

        while (index >= 0) {
            tag = tags[index];
            if (!tag.length || tag === "#" || tag.charAt(0) !== "#" || lookup[tag]) {
                tags.splice(index, 1);
            } else {
                lookup[tag] = true;
            }

            index -= 1;
        }

        fragment = document.createDocumentFragment();
        fragment.appendChild(document.createTextNode(value));
        index = 0;
        length = tags.length;
        while (index < length) {
            tag = tags[index];
            highlight(fragment, tag, "hashSymbol");
            index += 1;
        }

        emptyNode(to);
        to.appendChild(fragment);
    }

    addEvent("userInput", "keyup", function (e) {
        toPreviewHighlight(e, "preview");
    });
}());

在jsfiddle

上

这个代码稍微修改了其他问题和答案在这里SO（重用代码是好的）

if text contains '@' change color of '@'

How to extract value between # and space in textarea value

Using JavaScript, I want to use XPath to look for the presence of a string, then refresh the page based on that

当键入Hashtag后跟一个或多个字符时，在textarea中突出显示文本

1 个答案: