将变量数组大写

Capitalise a variable array

本文关键字：数组 变量      更新时间：2023-09-26

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

我可以大写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/

有什么想法吗？

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

您将看到，我的示例没有将其中一个实例（即<div class="subtitle">me & you</div>）大写。我认为这是因为你的过滤函数没有找到正确的文本节点。这里有一个关于如何查找文本节点的线程如何使用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); 
}

你考虑过使用CSS吗？

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

如果你想将.title中的文本大写，但不想将子节点大写，你可以这样做：

.title {
    text-transform: capitalize;
}
.title * {
    text-transform: none;
}
相关文章：