スニペットを実行すると、製品のコメントセクションが表示されます。
ユーザーの姓名を取得し、最初の文字を青い小さなボックスに入れるJavaScriptコードをいくつか作成しました。
問題は、言語がアラビア語(ペルシア語)フォントを使用していることです。たとえば、ユーザー名がعلیحسینی(アラビア語フォント)の場合、青いボックスにعحが表示されます。
しかし、私はそれをスペースなしでعحのように表示したいと思います(2つの文字の間のセミスペースのように分離されていますが、セミスペースよりもさらに薄いです)。写真のようなものにたどり着きたいので 
、2文字の間にスペース(半空間)を使う代わりに使うことにしました。
しかし、JSがこのコードを追加し、同じコードをコピーして貼り付けると検査すると、正常に機能します。
問題は文字フォントにあると思ったので、コードをᾒ
or;8082#&
などに変更しました。しかし、エラーや警告はなく、JSは正常に機能しているにもかかわらず、問題はまだ発生しておらず、結果はありません。
(function($) {
$.fn.commentAttr = function(options) {
$(".upndata-m7").each(function() {
var full_name = $(this).find(".untx-m7").text();
var name_split = full_name.split(" ");
var first_name_letter = '';
var last_name_letter = '';
if (typeof(name_split[0]) != "undefined" && name_split[0] !== null && name_split !== '') {
var first_name = name_split[0];
first_name_letter = first_name.charAt(0);
}
if (typeof(name_split[1]) != "undefined" && name_split[1] !== null && name_split !== '') {
var last_name = name_split[1];
last_name_letter = last_name.charAt(0);
}
$(this).find('.usrpic-tpl-s1 figure').attr("data-img", first_name_letter + ' ' + last_name_letter);
});
};
})(jQuery);
$(document).ready(function() {
$.fn.commentAttr();
});
.usrpic-tpl-s1 figure[data-img] {
width: 40px;
height: 40px;
border-radius: 10px;
position: relative;
text-transform: uppercase
}
.usrpic-tpl-s1 figure[data-img].c1-s1 {
background-color: rgba(62, 158, 232, .8)
}
.usrpic-tpl-s1 figure[data-img].c2-s1 {
background-color: rgba(232, 150, 62, .8)
}
.usrpic-tpl-s1 figure[data-img].c3-s1 {
background-color: rgba(241, 3, 70, .8)
}
.usrpic-tpl-s1 figure[data-img]::after {
content: attr(data-img);
left: 50%;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
color: #fff;
font-size: rem(21);
font-weight: 800;
white-space: nowrap
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 {
padding-top: 35px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 {
padding-top: 0;
padding-bottom: 45px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 .rctn-m7 {
position: relative
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucmain-m7 {
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 {
display: inline-block;
width: 100%;
vertical-align: middle;
padding-top: 30px;
position: relative;
background-color: orange
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #49bb5e
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #eb2d5a
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 10px 15px;
border-radius: 20px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
display: inline-block;
font-weight: 300;
font-size: rem(15);
line-height: 30px;
color: #333;
text-align: justify;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
margin-bottom: 15px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
margin-bottom: 35px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 140px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .userprp-tpl-m7 {
display: inline-block;
vertical-align: middle
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .uname-m7 {
margin-bottom: 6px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .untx-m7 {
display: inline-block;
font-size: rem(18);
font-weight: 500;
color: #333;
line-height: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .udtx-m7 {
display: inline-block;
width: 100%;
font-size: rem(15);
font-weight: 300;
color: #78797b
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 {
text-align: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li {
display: inline-block;
margin-left: 38px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li:last-child {
margin-left: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 {
padding: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7.like-m7:hover .nf {
background-color: rgba(235, 45, 90, .1);
color: rgba(235, 45, 90, .7)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .nf {
background-color: rgba(57, 145, 233, .1);
color: rgba(57, 145, 233, .75)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .ubtx-m7 {
color: rgba(40, 40, 40, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .nf {
font-size: px(15);
padding: 8px;
background-color: rgba(91, 91, 91, .05);
border-radius: 10px;
color: rgba(91, 91, 91, .2);
transition: all .3s ease 0s;
margin-left: 8px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .ubtx-m7 {
font-size: rem(15);
color: rgba(91, 91, 91, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
margin-bottom: 21px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
text-align: left;
float: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 {
display: inline-block;
width: 107px;
text-align: center;
background-color: #e77b33;
color: #fff;
border-radius: 5px;
padding: 3px 0 2px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 .ubtx-m7 {
font-size: rem(12)
}
@media only screen and (min-width:480px) {
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
width: auto;
max-width: inherit
}
}
@media only screen and (min-width:768px) {
.usercmmnt-tpl-m7.ucanswr-m7 .in-answer-m7 {
padding: 30px
}
.usercmmnt-tpl-m7.ucanswr-m7 .txtcmmnt-tpl-m7 {
padding-right: 150px
}
.usercmmnt-tpl-m7 .ucctn-m7 {
padding-top: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .ucinftx-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .ucinftx-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
display: table;
width: 100%;
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
display: table-cell;
vertical-align: top;
width: 120px;
padding-left: 16px;
padding-top: 20px;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: none
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 {
display: table-cell;
vertical-align: top
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
margin-left: 11px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
width: auto;
margin: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
float: unset;
margin-bottom: 13px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 20px 30px;
border-radius: 50px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: transparent;
padding: 0;
border-radius: 0;
margin-top: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
line-height: 36px
}
}
@media only screen and (min-width:992px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 35px
}
}
@media only screen and (min-width:1200px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 135px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="usercmmnt-tpl-m7 ucanswr-m7">
<div class="ucctn-m7">
<div class="ucmain-m7">
<div class="lctn-m7">
<div class="ucinftx-m7">
<div class="upndata-m7">
<div class="usrpic-tpl-s1">
<figure class="c1-s1" data-img="رم"></figure>
</div>
<div class="uname-m7">
<span class="untx-m7">علی حسینی</span>
</div>
<div class="udata-m7">
<span class="udtx-m7">17 شهریور 98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
必要なエンティティは、ゼロ幅非接合子文字(U + 200C)です。
const letters = [ "\u0639", "\u062D" ];
console.log( letters.join( "" ) );
console.log( letters.join( "\u200c" ) );
そのHTMLエンティティはです‌
が、innerHTMLではなく属性を設定しているため、代わりにjavascriptエスケープフォームが必要です("\u200C"
):
(function($) {
$.fn.commentAttr = function(options) {
$(".upndata-m7").each(function() {
var full_name = $(this).find(".untx-m7").text();
var name_split = full_name.split(" ");
var first_name_letter = '';
var last_name_letter = '';
if (typeof(name_split[0]) != "undefined" && name_split[0] !== null && name_split !== '') {
var first_name = name_split[0];
first_name_letter = first_name.charAt(0);
}
if (typeof(name_split[1]) != "undefined" && name_split[1] !== null && name_split !== '') {
var last_name = name_split[1];
last_name_letter = last_name.charAt(0);
}
$(this).find('.usrpic-tpl-s1 figure').attr("data-img", first_name_letter + '\u200c' + last_name_letter);
});
};
})(jQuery);
$(document).ready(function() {
$.fn.commentAttr();
});
.usrpic-tpl-s1 figure[data-img] {
width: 40px;
height: 40px;
border-radius: 10px;
position: relative;
text-transform: uppercase
}
.usrpic-tpl-s1 figure[data-img].c1-s1 {
background-color: rgba(62, 158, 232, .8)
}
.usrpic-tpl-s1 figure[data-img].c2-s1 {
background-color: rgba(232, 150, 62, .8)
}
.usrpic-tpl-s1 figure[data-img].c3-s1 {
background-color: rgba(241, 3, 70, .8)
}
.usrpic-tpl-s1 figure[data-img]::after {
content: attr(data-img);
left: 50%;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
color: #fff;
font-size: rem(21);
font-weight: 800;
white-space: nowrap
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 {
padding-top: 35px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 {
padding-top: 0;
padding-bottom: 45px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 .rctn-m7 {
position: relative
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucmain-m7 {
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 {
display: inline-block;
width: 100%;
vertical-align: middle;
padding-top: 30px;
position: relative;
background-color: orange
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #49bb5e
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #eb2d5a
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 10px 15px;
border-radius: 20px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
display: inline-block;
font-weight: 300;
font-size: rem(15);
line-height: 30px;
color: #333;
text-align: justify;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
margin-bottom: 15px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
margin-bottom: 35px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 140px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .userprp-tpl-m7 {
display: inline-block;
vertical-align: middle
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .uname-m7 {
margin-bottom: 6px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .untx-m7 {
display: inline-block;
font-size: rem(18);
font-weight: 500;
color: #333;
line-height: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .udtx-m7 {
display: inline-block;
width: 100%;
font-size: rem(15);
font-weight: 300;
color: #78797b
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 {
text-align: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li {
display: inline-block;
margin-left: 38px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li:last-child {
margin-left: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 {
padding: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7.like-m7:hover .nf {
background-color: rgba(235, 45, 90, .1);
color: rgba(235, 45, 90, .7)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .nf {
background-color: rgba(57, 145, 233, .1);
color: rgba(57, 145, 233, .75)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .ubtx-m7 {
color: rgba(40, 40, 40, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .nf {
font-size: px(15);
padding: 8px;
background-color: rgba(91, 91, 91, .05);
border-radius: 10px;
color: rgba(91, 91, 91, .2);
transition: all .3s ease 0s;
margin-left: 8px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .ubtx-m7 {
font-size: rem(15);
color: rgba(91, 91, 91, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
margin-bottom: 21px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
text-align: left;
float: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 {
display: inline-block;
width: 107px;
text-align: center;
background-color: #e77b33;
color: #fff;
border-radius: 5px;
padding: 3px 0 2px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 .ubtx-m7 {
font-size: rem(12)
}
@media only screen and (min-width:480px) {
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
width: auto;
max-width: inherit
}
}
@media only screen and (min-width:768px) {
.usercmmnt-tpl-m7.ucanswr-m7 .in-answer-m7 {
padding: 30px
}
.usercmmnt-tpl-m7.ucanswr-m7 .txtcmmnt-tpl-m7 {
padding-right: 150px
}
.usercmmnt-tpl-m7 .ucctn-m7 {
padding-top: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .ucinftx-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .ucinftx-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
display: table;
width: 100%;
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
display: table-cell;
vertical-align: top;
width: 120px;
padding-left: 16px;
padding-top: 20px;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: none
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 {
display: table-cell;
vertical-align: top
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
margin-left: 11px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
width: auto;
margin: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
float: unset;
margin-bottom: 13px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 20px 30px;
border-radius: 50px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: transparent;
padding: 0;
border-radius: 0;
margin-top: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
line-height: 36px
}
}
@media only screen and (min-width:992px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 35px
}
}
@media only screen and (min-width:1200px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 135px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="usercmmnt-tpl-m7 ucanswr-m7">
<div class="ucctn-m7">
<div class="ucmain-m7">
<div class="lctn-m7">
<div class="ucinftx-m7">
<div class="upndata-m7">
<div class="usrpic-tpl-s1">
<figure class="c1-s1" data-img="رم"></figure>
</div>
<div class="uname-m7">
<span class="untx-m7">علی حسینی</span>
</div>
<div class="udata-m7">
<span class="udtx-m7">17 شهریور 98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加