Question

我想将字符串的第一个字母大写。那部分已经完成。

我可以将div.title元素和其他元素大写，没有子节点没有问题。

我想做的是调用文本节点并仅更改第一个文本节点。

因此我想将所有fcn对象转换为大写。

我有以下html：

<div class="title">Me & you 
 <div class="subtitle">Me & you</div>
</div> 
<br /> 
<div class="title">Me & you</div>

以及以下Jquery：

function capitalise(str) {
if (!str) return;
var stopWords = ['a', 'an', 'and', 'at', 'but', 'by', 'far', 'from', 'if', 'into', 'of', 'off', 'on', 'or', 'so', 'the', 'to', 'up'];
str = str.replace(/\b\w+\b/ig, function(match) {
    console.log(match)
    return $.inArray(match, stopWords) == -1 ? match.substr(0, 1).toUpperCase() + match.substr(1) : match;
});
return str;
}

//Capitalise subtitles
$('div.subtitle').each(function() {
    $(this).text(capitalise($(this).text()));

});

//Capitalise Titles with no children
$('div.title').filter(function() {
    return !$(this).children().length;
}).each(function() {
    $(this).text(capitalise($(this).text()));
});

var fcn = $('div.title').contents().filter(function() { return this.nodeType === 3;});

alert(fcn);
console.log(fcn);

我想将fcn变量数组大写。尝试了各种方法但没有成功。

http://jsfiddle.net/bizwizone/wMCEa/1/

有什么想法吗？

Answer 1

你考虑过使用CSS吗？

.title, .subtitle {
    text-transform: capitalize;
}

如果要将.title中的文本大写，而不是子节点，则可以执行以下操作：

.title {
    text-transform: capitalize;
}
.title * {
    text-transform: none;
}

Answer 2

您可以使用replaceWith方法http://jsfiddle.net/nEcSg/2/

您会看到我的示例没有大写其中一个实例，即<div class="subtitle">me & you</div>。我相信这是因为你的过滤功能没有找到正确的文本节点。这是关于如何查找文本节点How do I select text nodes with jQuery?的一个主题。我认为jQuery可能不是最好的方法

function capitalise(str) {
    if (!str) return;
    var stopWords = ['a', 'an', 'and', 'at', 'but', 'by', 'far', 'from', 'if', 'into', 'of', 'off', 'on', 'or', 'so', 'the', 'to', 'up'];
    str = str.replace(/\b\w+\b/ig, function(match) {
        return $.inArray(match, stopWords) == -1 ? match.substr(0, 1).toUpperCase() + match.substr(1) : match;
    }); 
    return str;
}

var fcn = $('div.title').contents().filter(function() { 
    return this.nodeType === 3;
}).replaceWith(function(){
    return capitalise($(this).text());
});

工作答案

基于我上面链接的帖子的信息，我写了一些更好的东西。 http://jsfiddle.net/nEcSg/3/

function capitalise(str) {
    if (!str) return;
    var stopWords = ['a', 'an', 'and', 'at', 'but', 'by', 'far', 'from', 'if', 'into', 'of', 'off', 'on', 'or', 'so', 'the', 'to', 'up'];
    str = str.replace(/\b\w+\b/ig, function(match) {
        return $.inArray(match, stopWords) == -1 ? match.substr(0, 1).toUpperCase() + match.substr(1) : match;
    }); 
    return str;
}

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], whitespace = /^\s*$/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || !whitespace.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}


var textNodes = getTextNodesIn(document.body);
for (var i = 0; i < textNodes.length; i++) {
     var textNode = textNodes[i];
     textNode.parentNode.replaceChild(document.createTextNode(capitalise( $(textNode).text() ) ), textNode); 
}

大写变量数组

2 个答案: